<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="echart-line" style="width: 100%;height: 600px"></div>
</template>
<script>

import * as echarts from 'echarts'

export default {
    methods: {
        initChart() {
            let a = [
                {key: '1月',val: 41},
                {key: '3月',val: 52},
                {key: '2月',val: 17},
                {key: '4月',val: 74},
                {key: '7月',val: 41},
                {key: '5月',val: 44},
            ]
            // 怎么使得a的val按照月份顺序输出数组
            let b = [41,17,52,74,44,41]

            let chartDom = document.getElementById('echart-line');
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(chartDom);
            var colors = ['#5793f3', '#006400'];

            var xData = function () {
                var data = [];
                for (var i = 1; i <= 12; i++) {
                    data.push(i + '月');
                }
                data.push('1月')
                data.push('2月')
                data.push('3月')
                data.push('4月')
                data.push('5月')
                data.push('6月')
                data.push('7月')
                return data;
            }();
            var option = {
                title: {
                    text: '月度工单总量变化图',
                    textStyle: {
                        fontSize: '15'
                    }
                },
                tooltip: {
                    trigger: "axis",
                    formatter: (parmas) =>{
                        let item = '<div>' + "<span style='display:inline-block;margin-right:5px;width:10px;height:10px;background-color:blue'>"+ '</span>' + '工单数量:' +  parmas[0].data + '</div>'
                        return item
                            console.log(parmas)
                    }
                    // "axisPointer": {
                    //     "type": "shadow",
                    //     textStyle: {
                    //         color: "#fff"
                    //     }
                    // },
                },
                grid: {
                    top: 80,
                },
                legend: {
                    data: ['工单数量', '工单数量变化'],
                    align: 'left',
                    left: 10,
                    top: 30
                },
                "calculable": true,
                "xAxis": [{
                    "type": "category",
                    "axisLine": {
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    "splitLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitArea": {
                        "show": false
                    },
                    "axisLabel": {
                        "interval": 0,
                        textStyle: {
                            fontSize: 15
                        }
                    },
                    "data": xData,
                }],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 1000,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    {
                        type: 'value',
                        name: '',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '工单数量',
                        type: 'bar',
                        color: colors[0],
                        barWidth: 30,
                        //加在series中
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#615a5a'
                                    },
                                    formatter: function (params) {
                                        if (params.value == 0) {
                                            return '';
                                        } else {
                                            return params.value;
                                        }
                                    }
                                }
                            }
                        },
                        data: [550, 432, 602, 340, 225, 288, 358, 448, 366, 237, 213, 217,288,474,654, 526, 425, 324, 341]
                    },
                    {
                        name: '工单数量变化',
                        color: colors[1],
                        yAxisIndex: 1,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 3,//折线宽度
                                },
                                opacity: 0.4
                            }
                        },
                        data: [55, 43, 60, 34, 22.5, 28.8, 35.8, 44.8, 36.6, 23.7, 21.3, 21.7,28.8,47.4,65.4, 52.6, 42.5, 32.4, 34.1]
                    }]
            };


            option && myChart.setOption(option);
        },

    }

}
</script>
